<script setup name="App" lang="ts">
import { ref } from 'vue';

const mouse = ref({x: 0, y: 0})

const handleMousemove = (e: MouseEvent) => {
  mouse.value.x = e.pageX
  mouse.value.y = e.pageY
}


const count = ref(0)

const handleClick = (e: MouseEvent) => {
  const ele = e.target as HTMLButtonElement
  count.value += +ele.innerHTML
}

</script>
<template>
  <div>
    <p>x: {{mouse.x}}</p>
    <p>y: {{mouse.y}}</p>
    <h1 @mousemove="handleMousemove" :style="{ height: '100px', backgroundColor: 'teal' }"></h1>

    <p>count: {{count}}</p>
    <button @click="handleClick">6</button>
  </div>
</template>
